import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Card, Space, message, Tag, Tabs } from 'antd';
import { connect, FormattedMessage, useIntl } from 'umi';
import MyDataTable from '@/components/MyDataTable';
import moment from 'moment';
import request from '@/utils/request';
import QuickMenu from '@/components/QuickMenu';

const { TabPane } = Tabs;
const apiURL = '/api/services/app/POHeader/';

const ViewPage: React.FC<any> = (props) => {
  const [params, setParams] = useState({ status: 'P' });
  const [freshNum, setFreshNum] = useState(0);
  const [record, setRecord] = useState([]);
  const intl = useIntl();
  const doubleClick = (record: any) => {
    console.log(record);
  };

  const apprvPO = (status: string) => {
    if (record.length <= 0) {
      message.warning(intl.formatMessage({ id: 'pages.selectAtLeastOneRecord' }));
      return;
    }
    const data: any = [];
    record.forEach((element: any) => {
      const obj = {
        id: element.id,
        status,
        user: props.currentUser.userName,
      };
      data.push(obj);
    });
    console.log(data);
    request(apiURL + 'ApprvPO', {
      method: 'POST',
      data,
    }).then((response) => {
      if (response) {
        if (response.success) {
          message.success(intl.formatMessage({ id: 'pages.approve.success' }));
        }
        setFreshNum(freshNum + 1);
      }
    });
  };

  const callback = (key: any) => {
    setParams({ ...params, status: key });
    setFreshNum(freshNum + 1);
  };

  const myTag = (text: any, approvalStatus: any): React.ReactNode => {
    if (approvalStatus === 'A') return <Tag color="#87d068">{text}</Tag>;
    else if (approvalStatus === 'R') return <Tag color="#f50">{text}</Tag>;
    else if (approvalStatus === 'P') return <Tag color="#2db7f5">{text}</Tag>;
    else return <Tag>{text}</Tag>;
  };

  const columns = [
    {
      title: <FormattedMessage id="pages.poNum" />,
      dataIndex: 'poNum',
      render: (text: any, record: any) => <span> {myTag(text, record.approvalStatus)}</span>,
    },
    {
      title: <FormattedMessage id="pages.approvedAmount" />,
      dataIndex: 'approvedAmount',
      render: (text: any) => (
        <span>
          ￥<strong>{text}</strong>
        </span>
      ),
    },
    {
      title: <FormattedMessage id="pages.promiseDate" />,
      dataIndex: 'promiseDate',
      render: (text: any) => (text ? moment(text).format('YYYY-MM-DD') : ''),
    },
    {
      title: <FormattedMessage id="pages.buyerID" />,
      dataIndex: 'buyerID',
    },
  ];

  const rowSelection = {
    onChange: (_selectedKeys: any, selectedRows: any) => {
      setRecord(selectedRows);
    },
  };

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Card
        title={<FormattedMessage id="menu.purchase.poApprv" />}
        extra={[
          <Space key="S1">
            <Button type="primary" onClick={() => apprvPO('A')}>
              <FormattedMessage id="pages.approve" />
            </Button>
            <Button type="primary" danger onClick={() => apprvPO('R')}>
              <FormattedMessage id="pages.refuse" />
            </Button>
            <QuickMenu path="/purchase/poApprv" icon="icon-checkmark" title="pages.POApprv" />
          </Space>,
        ]}
      >
        <Tabs defaultActiveKey="P" onChange={callback}>
          <TabPane tab={<FormattedMessage id="pages.waitApprove" />} key="P" />
          <TabPane tab={<FormattedMessage id="pages.approved" />} key="A" />
          <TabPane tab={<FormattedMessage id="pages.refused" />} key="R" />
        </Tabs>
        <MyDataTable
          act="GetList"
          columns={columns}
          freshNum={freshNum}
          pageSize={10}
          control="POHeader"
          doubleClick={doubleClick}
          rowSelection={rowSelection}
          params={params}
        />
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ Abp }: API.IConnectState) => ({
  currentUser: Abp.currentUser,
}))(ViewPage);
